<template>
	<div style="width: 100%;">
	<div style="width: 100%;text-align: center;">
			<el-text size="large"><el-icon ><Memo /></el-icon> 我的订单</el-text>
	</div>
	<br />
	<div style="background-color: #E1337F;height: 0.1rem;"></div>
	<el-card>
	<div style="width: 100%;">
	<el-table :data="data.orders" style="width: 100%;" border>
		<el-table-column type="expand">
			
			<template #default="orditem">
				<h3 style="text-align: center;">订单详情</h3>
				<el-table :data="orditem.row.orditems" :border="true">
				  <el-table-column label="商品编号" prop="commodity.comid" />
				  <el-table-column label="商品名称" prop="commodity.comname"/>
				  <el-table-column label="商品图片" prop="commodity.pic" >
					  <template #default="car">
						  <el-image style="width: 5rem;height: 5rem;"
						  	:src="$ip+`/public/shows/`+car.row.commodity.pic" />
					  </template>
				  </el-table-column>
				  <el-table-column label="生产日期">
					  <template #default="car">
						  {{mytpost(car.row.commodity.tmake)}}
					  </template>
				  </el-table-column>
				  <el-table-column label="数量" prop="num" />
				  <el-table-column label="价格">
					 
					  <template #default="car">
					  		 <p style="color: #E1337F;">¥{{car.row.price}}</p>					 
					  </template>
				  </el-table-column>
				</el-table>
				</template>
		</el-table-column>
		<el-table-column label="订单号" prop="ordid"></el-table-column>
		<el-table-column label="收货人" prop="user.uid"></el-table-column>
		<el-table-column label="收货地址" prop="shipadds"></el-table-column>
		<el-table-column label="联系电话" prop="shipphone"></el-table-column>
		<el-table-column label="发货单号" prop="shipno"></el-table-column>
		<el-table-column label="下单时间" >
			<template #default="car">
				{{mytpost(car.row.orddate)}}
			</template>
		</el-table-column>
		<el-table-column label="总价" prop="amount"></el-table-column>
		<el-table-column label="付款状态" >
			<template #default="car">
				<p v-if="car.row.payment!=0" style="color: #E1337F;">{{payment(car.row.payment)}}</p>
				<p><el-link @click="gopay(car.row.ordid)" style="color: #E1337F;" v-if="car.row.payment==0" >{{payment(car.row.payment)}}</el-link></p>
			</template>
		</el-table-column>
		<el-table-column label="发货状态" >
			<template #default="car">
				<p style="color: #E1337F;">{{shipment(car.row.shipment)}}</p>
			</template>
		</el-table-column>
		<el-table-column label="签收状态">
			<template #default="car">
				<p v-if="car.row.shipment!=1&&car.row.tsign==undefined" style="color: #E1337F;">{{signment(car.row.tsign,car.row.shipment)}}</p>
				<p><el-link @click="gosig(car.row.ordid)" style="color: #E1337F;"  v-if="car.row.shipment==1&&car.row.tsign==undefined" >{{signment(car.row.tsign,car.row.shipment)}}</el-link></p>
				<p><el-link @click="goremark(car.row.orditems[0].commodity.comid)" style="color: #E1337F;"  v-if="car.row.shipment==1&&car.row.tsign!=undefined" >{{signment(car.row.tsign,car.row.shipment)}}</el-link></p>
			</template>
		</el-table-column>
		<el-table-column label="订单创建时间">
			<template #default="car">
				{{mytpost(car.row.orddate)}}
			</template>
		</el-table-column>
	
	</el-table>
	
	<div style="margin-left: 33%;">
					 <el-pagination  :total="data.page.count" :page-count="myCeil(data.page.count/data.page.l)"
					 layout="jumper , prev, pager ,next ,total" @current-change="pageQuery" /> 
				  </div>
	</div>
	</el-card>
	
	</div>
</template>


<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Memo} from '@element-plus/icons-vue'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {success,warning,message,errors} from '../../store/alert.js'
		const data=reactive({
			orders:[],
			page:{
				p:0,
				l:5,
				count:0
			}
		})
		function goremark(comid){
			router.push({
				path:"/cus/cusreply",
				query:{
					c:comid
				}
			})
		}
		function gopay(ordid){
			router.push({
				path: '/payment',
				query: {
					ordid:ordid
				}
			})
			
		}
		function gosig(ordid){
			$get("/cus/order/updatetign/"+ordid+"/"+data.page.p+"/"+data.page.l).then((read)=>{
				success(read.data.msg)
				data.orders=read.data.data.orders
				data.page.count=read.data.data.count				
			})
			
			
		}
		
		function pageQuery(val=1){
			// 翻页跳转
			
			let pagenum=data.page.l*val-data.page.l
			data.page.p=pagenum
			$get("/cus/order/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.orders=read.data.data.orders
				data.page.count=read.data.data.count				
			})
			
			}
		const myCeil = computed(() => {
				return function(a) {
					var s= Math.ceil(a)
					return s
				}
			})
		const mytpost = computed(() => {
			return function(tpost) {
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		const payment=computed(()=>{
				return function (ment){
					if(ment==0){
						return "未付款/去付款"
					}else{
						return"已付款"
					}
				}
			})
			const shipment=computed(()=>{
				return function (ment){
					if(ment==0){
						return "未发货"
					}else{
						return"已发货"
					}
				}
			})
		const signment=computed(()=>{
			return function (ment,ship){
					if(ment==undefined){
						if(ship==0){
							return"未签收"
						}else{
							return "未签收/可签收"
						}
					}else{
						return "已签收/可评论"
					}
				
			}
		})
		
		
		onMounted(()=>{
			if(store.state.user.uname==""){
				errors("未登录，请登录")
				router.push("/login")
				return
			}
			$get("/cus/order/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.orders=read.data.data.orders
				data.page.count=read.data.data.count				
			})
			
			
			
		})
		
		
</script>

<style>
</style>
